<template>
	<view class="layout">
		<view class="logo">
			<image src="/static/logo.png" mode="widthFix"/>
			<h2>注册系统</h2>
		</view>
		<wd-form ref="form" :model="model">
			<wd-cell-group border>
				<wd-input
					label="手机号"
					label-width="100px"
					prop="mobile"
					clearable
					v-model="model.mobile"
					placeholder="请输入手机号"
					:rules="[{
						required: true,
						validator: validatorMobile,
						message: '请正确的手机号'
					}]"
				/>
				<wd-input
					label="用户名"
					label-width="100px"
					prop="username"
					clearable
					v-model="model.username"
					placeholder="请输入用户名"
					:rules="[{
						required: true,
						message: '请填写用户名'
                    }]"
				/>
				<wd-input
					label="密码"
					label-width="100px"
					prop="password"
					show-password
					clearable
					v-model="model.password"
					placeholder="请输入密码"
					:rules="[{
						required: true,
						message: '请填写密码'
                    }]"
				/>
				<wd-input
					label="确认密码"
					label-width="100px"
					prop="rePassword"
					show-password
					clearable
					v-model="model.rePassword"
					placeholder="请输入确认密码"
					:rules="[{
						required: true,
						message: '请填写确认密码'
                    }]"
				/>
			</wd-cell-group>

			<text class="link" @click="toLogin()">已有账号？去登录</text>

			<view class="footer">
				<wd-button
					type="primary"
					size="large"
					@click="handleSubmit()"
					block
					:loading="loading"
					:disabled="loading"
				>注册</wd-button>
			</view>
		</wd-form>
	</view>

	<!-- 消息通知组件嵌入点 -->
	<wd-notify/>
</template>

<script setup>
import {
	reactive,
	ref
} from 'vue';
import {
	useNotify
} from 'wot-design-uni'
// 引入用户接口
import userApi from '../../apis/user';

// https://wot-design-uni.cn/component/notify.html
// 消息通知组件
const {
	showNotify
} = useNotify();

// 手机和和密码
const model = reactive({
	// 默认数据
	mobile: '',
	username: '',
	password: '',
	rePassword: '',
});
// 表单
const form = ref();

// 加载中
const loading = ref(false);

// 验证手机号格式
const validatorMobile = (val) => {
	return /1\d{10}/.test(val)
}

// 提交操作
const handleSubmit = () => {
	loading.value = true;
	form.value
		// 验证数据格式
		.validate()
		.then(async ({valid}) => {
			// 如果验证通过
			if (valid) {
				// 判断两次密码是否一致
				if (model.password !== model.rePassword) {
					// 显示一个1.5秒的提示
					showNotify({
						type: 'danger',
						message: '两次密码不一致',
						duration: 1500,
					});
					return;
				}

				// 请求注册接口
				await userApi.register(model)
					.then((result) => {
						// 将用户信息转换为字符串
						const userInfo = JSON.stringify(result.data);
						// 保存用户信息
						uni.setStorageSync('user', userInfo);
						// 打印保存的用户信息
						console.log(uni.getStorageSync('user'), 'user');
						// 注册成功
						showNotify({
							type: 'success',
							message: result.msg,
							duration: 1500,
							onClosed() {
								// 跳转到首页
								uni.navigateTo({
									url: '/pages/index/index'
								})
							}
						});
						// 失败的情况已经在request.js中处理了
					})
			}
		})
		// 验证失败时打印日志
		.catch((errors) => {
			console.log(errors, 'error');
		})
		// 最终执行
		.finally(() => {
			loading.value = false;
		})
}

const toLogin = () => {
	uni.navigateTo({
		url: '/pages/user/login'
	})
}
</script>

<style scoped lang="scss">
.layout {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 80vh;
	padding: 0 20rpx;
}

.logo {
	margin-bottom: 50rpx;

	display: flex;
	flex-direction: column;
	text-align: center;

	image {
		width: 250rpx;
	}

	h2 {
		margin-top: 20rpx;
		font-size: 40rpx;
	}
}

.wd-form {
	width: 100%;

	.link {
		font-size: 26rpx;
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
		color: #007aff;
	}
}

.footer {
	margin-top: 20rpx;
}

.wd-cell-group {
	margin-top: 20rpx;
}

.wd-input {
	margin-top: 20rpx;
}
</style>
